<template>
  <div class="cus-crumb">
    <div class="left">
      <div class="item" @click="gotoPage(item, index)" v-for="(item, index) in list" :key="item">
        <span class="el-icon-arrow-right" v-if="index != 0"></span>{{ item }}
      </div>
    </div>
    <div class="right">
      <div v-if="right" class="goBack" @click="$emit('goBack')"><i class="el-icon-back"></i>返回上一级</div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    right: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //   : ["我的知识库", "新建1", "详情"],
    };
  },
  mounted() {},
  methods: {
    gotoPage(item, index) {
      if (index != 0 && index != this.list.length - 1) {
        this.$emit("gotoPage", item);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.cus-crumb {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .left {
    display: flex;
    align-items: center;
    .item {
      font-size: 16px;
      color: rgba(0, 20, 45, 0.5);
      cursor: pointer;
      span {
        font-size: 14px;
        color: rgba(0, 20, 45, 0.5);
      }
    }
    > :last-child {
      cursor: default;
      color: rgba(3, 91, 236, 0.8);
    }
    > :first-child {
      cursor: default;
    }
  }

  .goBack {
    // margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: right;
    cursor: pointer;
  }
  //   .right {
  //   }
}
</style>
